<template>
  <div>
    <div>入住管理</div>
    <div class="box" v-for="(item, index) in 4" :key="index">
      <div class="item">
        <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="" />
        <div>图片介绍{{ item }}</div>
      </div>
    </div>
    <div class="clearfix"></div>
    <div style="padding: 6px">你好啊</div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.box {
  box-sizing: border-box;
  padding: 0 6px;
  float: left;
  width: 24.99%;
  .item {
    border: $border;
    img {
      width: 100%;
      height: auto;
    }
  }
}
// @media only screen and (max-width: 700px) {
//   .box {
//     width: 49.99%;
//     margin: 6px 0;
//   }
// }
// @media only screen and (max-width: 500px) {
//   .box {
//     width: 100%;
//   }
// }

@media only screen and (max-width: 700px) {
  .box {
    width: 49.99%;
    margin: 6px 0;
  }
}
@media only screen and (max-width: 500px) {
  .box {
    width: 100%;
  }
}
.clearfix:after {
  content: '';
  display: table;
  clear: both;
}
</style>
